	<template>
	<div>
		<!--头部-->
		<div class="ji-top">
			<a href="#/MyShenDeng"><img class="ji-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
			<span class="ji-pin">兑换记录</span>
			<p><span class="jidd del">清空</span><span class="jidd add">编辑</span></p>
		</div>
		<!---->
		<!--商品1111111-->
		<div class="dui-gloss">
			<p class="dui-ri">2017-08-13</p>
			<!--左图片-->
			<div class="dui-glossLeft">
				<span class="dui-hao dui-active"></span>
				<img class="dui-chun" src="../assets/img/shouye/tuijian/chuncai.png" alt=""/>
			</div>
			<!--右内容-->
			<div class="dui-glossRight">
				<!--标题-->
				<p class="dui-biaogloss">焕彩萃璨花蕊唇彩4.8g</p>
				<!--图片-->
				<div class="dui-imggloss">
					<img class="dui-guoqi" src="../assets/img/shouye/sousuo/6tuo.png" alt=""/>
					<img class="dui-huiji" src="../assets/img/duanhuowang/hui.png" alt=""/>
					<span class="dui-hai">海外直邮</span>
				</div>
				<p class="dui-san">
					<span class="dui-shu">500</span><img src="../assets/img/gerenzhongxin/kefu/yuanbao.png" alt=""/>
					<span class="dui-qian">￥166.06</span>
					<span class="dui-huan">已兑换</span>
				</p>
			</div>
		</div>

		<!--商品-->
		<p class="dui-ri">2017-08-27</p>
		<div v-for="bb in 3" class="dui-gloss">

			<!--左图片-->
			<div class="dui-glossLeft">
				<span class="dui-hao"></span>
				<img class="dui-chun" src="../assets/img/shouye/tuijian/chuncai.png" alt=""/>
			</div>
			<!--右内容-->
			<div class="dui-glossRight">
				<!--标题-->
				<p class="dui-biaogloss">
					焕彩萃璨花蕊唇彩4.8g
				</p>
				<!--图片-->
				<div class="dui-imggloss">
					<img class="dui-guoqi" src="../assets/img/shouye/sousuo/6tuo.png" alt=""/>
					<img class="dui-huiji" src="../assets/img/duanhuowang/hui.png" alt=""/>
					<span class="dui-hai">海外直邮</span>
				</div>
				<p class="dui-san">
					<span class="dui-shu">500</span><img src="../assets/img/gerenzhongxin/kefu/yuanbao.png" />
					<span class="dui-qian">￥166.06</span>
					<span class="dui-huan">已兑换</span>
				</p>
			</div>
		</div>

		<!--底部删除-->
		<div class="dui-foot">
			<span class="dui-xuan dui-hao"></span>
			<span class="dui-quan">全选</span>
			<span class="dui-huan dui-del">删除</span>
		</div>

	</div>
</template>

<script>
	export default {
		methods: {
			dui: function() {
				var dh = false;
				$(".add").click(function() {
					if(dh == false) {
						$(".dui-hao").css("display", "none");
						dh = true;
					} else if(dh == true) {
						$(".dui-hao").css("display", "block");
						dh = false;
					}
				})
			},
			hao:function(){
				$(".dui-hao").attr("dian",false);
				$(".dui-hao").click(function(){
					if($(this).attr("dian") == "true") {
						$(this).addClass("dui-active").siblings(".dui-hao").removeClass("dui-active");
						$(this).attr("dian", false);
					} else if($(this).attr("dian") == "false") {
						$(this).removeClass("dui-active");
						$(this).attr("dian", true);
					}
				})
			}
		},
		mounted: function() {
			this.dui();
			this.hao();
		}
	}
</script>

<style>
	.ji-top {
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #E53E42;
		z-index: 100;
	}
	
	.ji-pin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		font-weight: 200;
		padding: 0 11rem 0 19rem;
	}
	
	.ji-jian {
		width: 2.3rem;
	}
	
	.jidd {
		font-size: 3rem;
		color: #FFFFFF;
		font-weight: 100;
	}
	
	.add {
		border-left: 0.2rem solid #FFFFFF;
		padding-left: 1rem;
	}
	
	.del {
		padding-right: 1rem;
	}
	/*各个商品*/
	
	.dui-gloss {
		width: 100%;
		background: #FFFFFF;
		overflow: hidden;
	}
	
	.dui-glossLeft {
		width: 20rem;
		height: 20rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		float: left;
	}
	
	.dui-glossLeft .dui-chun {
		width: 6.9rem;
		height: 15.3rem;
	}
	
	.dui-hao {
		width: 3rem;
		height: 3rem;
		border:0.1rem solid #a6a6a6;
		border-radius: 50%;
	}
	.dui-active{
		background:url(../assets/img/gerenzhongxin/kefu/duihao.png) no-repeat;
		background-size:  100% 100%;
		border:none;
	}
	/*右*/
	
	.dui-glossRight {
		width: 52rem;
		height: 20rem;
		border-bottom: 0.01rem solid #cccccc;
		float: left;
	}
	
	.dui-biaogloss {
		font-size: 3rem;
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		margin: 2.8rem 0 2rem 0;
		color: #333333;
	}
	
	.dui-imggloss {
		width: 100%;
		height: 6.4rem;
		line-height: 6.4rem;
	}
	
	.dui-guoqi {
		width: 3rem;
		height: 2rem;
		border: 0.01rem solid #CCCCCC;
		margin: 0 2rem;
	}
	
	.dui-huiji {
		width: 3.4rem;
		height: 3.3rem;
		padding-right: 1rem;
	}
	
	.dui-hai {
		font-size: 2.4rem;
		color: #666666;
	}
	
	.dui-san>span {
		display: inline-block;
	}
	
	.dui-shu {
		font-size: 3rem;
		color: #E53E42;
		padding-left: 2rem;
		padding-right: 1rem;
	}
	
	.dui-qian {
		font-size: 2.4rem;
		color: #808080;
		text-decoration: line-through;
		padding-left: 3rem;
		padding-right: 13rem;
	}
	
	.dui-huan {
		width: 12rem;
		height: 4rem;
		background: #E53E42;
		font-size: 2.8rem;
		border-radius: 2rem;
		text-align: center;
		color: #FFFFFF;
		font-weight: 100;
	}
	/*日期*/
	
	.dui-ri {
		width: 100%;
		height: 6rem;
		border-bottom: 0.1rem solid #cccccc;
		font-size: 2.8rem;
		color: #4D4D4D;
		line-height: 6rem;
		padding-left: 2rem;
		background: #FFFFFF;
	}
	/*底部删除*/
	.dui-foot {
		width: 100%;
		height: 9.6rem;
		background: #FFFFFF;
		border-top: 0.1rem solid #CCCCCC;
		font-size: 3rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #4D4D4D;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}
	.dui-xuan{
		margin-left: 3rem;
	}
	.dui-quan{
		margin-left: -40rem;
	}
	.dui-del{
		margin-right: 3rem;
	}
</style>